<template>
  <div>
    <div v-if="flag == 0">
      <div class="mlt">
        <el-button
          v-permissions="{ permission: ['add-group:CustomerGroup'] }"
          type="primary"
          @click="addReservationClisk"
        >
          新增家庭组
        </el-button>
      </div>
      <div style="margin-top: 20px; width: 80%; margin-bottom: 20px">
        <el-input
          v-model="input"
          placeholder="搜索用户名称"
          style="width: 200px; margin-left: 10px"
          @keyup.enter.native="search()"
        />
        <el-button style="margin-left: 10px" type="primary" @click="search">
          搜索
        </el-button>
        <el-button style="margin-left: 10px" type="primary" @click="Reset">
          重置
        </el-button>
      </div>
      <div class="ml">
        <el-table :data="tableData" :empty-text="emptyText" style="width: 100%">
          <el-table-column
            :index="indexMethod"
            label=""
            type="index"
            width="50"
          />
          <el-table-column label="家庭组名称" prop="group_name" width="" />
          <el-table-column label="会员级别" prop="level_name" width="" />
          <el-table-column label="成长值" prop="level_up" width="" />
          <el-table-column label="积分" prop="" width="" />
          <el-table-column label="操作" prop="">
            <template slot-scope="scope">
              <el-button
                v-permissions="{ permission: ['view-group:CustomerGroup'] }"
                type="primary"
                @click="details(scope.row)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-if="total >= 10"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-if="flag == 1">
      <AddGroup @showMain="showMain" />
    </div>
    <div v-if="flag == 2">
      <DetailsGroup :id="id" @showMain="showMain" />
    </div>
  </div>
</template>
<script>
  import AddGroup from './components/addGroup.vue'
  import DetailsGroup from './components/detailsGroup.vue'

  import { getCusGroupList } from '@/api/gustomerGroup'

  export default {
    components: {
      AddGroup,
      DetailsGroup,
    },
    data() {
      return {
        //切换页面状态
        flag: 0,
        input: '',
        doctorOptions: [],
        pagesize: 10,
        emptyText: ' ',
        tableData: [],
        id: '',
        total: '',
        page: 1,
      }
    },
    watch: {},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })

        const params = {
          pagesize: 10,
          page: this.page,
          group_name: this.input,
        }
        getCusGroupList(params).then((res) => {
          this.tableData = res.data.data
          this.total = res.data.total
          loading.close()
          if (res.data.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      addReservationClisk() {
        this.flag = 1
      },
      showMain(e) {
        this.flag = e
      },
      // 详情
      details(e) {
        this.flag = 2
        this.id = e.id
      },
      // 搜索
      search() {
        this.page = 1
        this.init()
      },
      Reset() {
        this.page = 1
        this.input = ''
        this.init()
      },
      handleEdit() {},
      handleDelete() {},
      indexMethod(index) {
        index = index + 1 + (this.page - 1) * 10
        return index
      },
      handleCurrentChange(val) {
        this.indexMethod()
        const _this = this
        _this.page = val
        this.init()
      },
    },
  }
</script>
<style></style>
